<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">

		<title>账单明细</title>

		<link href="../AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css">
		<link href="../AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css">

		<link href="../css/personal.css" rel="stylesheet" type="text/css">
		<link href="../css/bilstyle.css" rel="stylesheet" type="text/css">

		<script src="../AmazeUI-2.4.2/assets/js/jquery.min.js" type="text/javascript"></script>
		<script src="../AmazeUI-2.4.2/assets/js/amazeui.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.6/vue.min.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
		<script src="../js/axiosUtil.js"></script>
		<style>
			.goodImg {
				height: 80px;
				width: 80px;
			}
		</style>
	</head>

	<body>
		<!--头 -->
		<header>
			<article>
				<div class="mt-logo" id="app1">
					<!--顶部导航条 -->
					<div class="am-container header">
						<ul class="message-l">
							<div class="topMessage">
								<template v-if="!islogin">
									<div class="menu-hd">
										<a href="login.html" target="_top" class="h">亲，请登录</a>
										<a href="register.html" target="_top">免费注册</a>
									</div>
								</template>
								<template v-else>
									<div class="menu-hd">
										<a href="#" style="color: red;">{{username}}</a>
										<a href="#" @click="logout">退出登录</a>
									</div>
								</template>
							</div>
						</ul>
						<ul class="message-r" v-if="islogin">
							<div class="topMessage home">
								<div class="menu-hd"><a href="home.html" target="_top" class="h">商城首页</a></div>
							</div>
							<template v-if="islogin">
								<div class="topMessage my-shangcheng">
									<div class="menu-hd MyShangcheng"><a href="information.html" target="_top"><i
												class="am-icon-user am-icon-fw"></i>个人中心</a></div>
								</div>
								<div class="topMessage mini-cart">
									<div class="menu-hd"><a id="mc-menu-hd" href="shopcart.html" target="_top"><i
												class="am-icon-shopping-cart  am-icon-fw"></i><span>购物车</span><strong
												id="J_MiniCartNum" class="h">0</strong></a></div>
								</div>
							</template>
						</ul>
					</div>

						<!--悬浮搜索框-->

						<div class="nav white">
							<div class="logoBig">
								<li><img src="../images/logobig.png" /></li>
							</div>

							<div class="search-bar pr">
								<a name="index_none_header_sysc" href="#"></a>
								<form>
									<input id="searchInput" name="index_none_header_sysc" type="text" placeholder="搜索" autocomplete="off">
									<input id="ai-topsearch" class="submit am-btn" value="搜索" index="1" type="submit">
								</form>
							</div>
						</div>
						<div class="clear"></div>
					</div>
				</div>
			</article>
		</header>
            <div class="nav-table">
					   <div class="long-title"><span class="all-goods">全部分类</span></div>
					   <div class="nav-cont">
							<ul>
								<li class="index"><a href="#">首页</a></li>
                                <li class="qc"><a href="#">闪购</a></li>
                                <li class="qc"><a href="#">限时抢</a></li>
                                <li class="qc"><a href="#">团购</a></li>
                                <li class="qc last"><a href="#">大包装</a></li>
							</ul>
						</div>
			</div>
			<b class="line"></b>
		<div class="center">
			<div class="col-main">
				<div class="main-wrap" id="app2">
					<div class="am-cf am-padding">
						<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">账单明细</strong> / <small>Electronic&nbsp;bill</small></div>
					</div>
					<hr>

					<!--交易时间	-->

					<!-- <div class="order-time">
						<label class="form-label">交易时间：</label>
						<div class="show-input">
							<select class="am-selected" data-am-selected>
								<option value="today">今天</option>
								<option value="sevenDays" selected="">最近一周</option>
								<option value="oneMonth">最近一个月</option>
								<option value="threeMonths">最近三个月</option>
								<option class="date-trigger">自定义时间</option>
							</select>
						</div>
                          <div class="clear"></div>
					</div> -->

					<table width="100%">

						<thead>
							<tr>
								<th class="memo"></th>
								<th class="name">商品名称</th>
								<th class="time">购买数量</th>
								<th class="amount">金额</th>
								<th class="action">操作</th>
							</tr>
						</thead>

						<tbody>
							<template v-for="(item, index) in tableData" :key="index">
								<tr>
									<td class="img">
										<i><img :src="item.productImage" class="goodImg"></i>
									</td>
									<td class="title name">
										<p class="content">
											{{item.productName}}
										</p>
									</td>
									<td class="time">
										<p class="content">
											{{item.quantity}}
										</p>
									</td>
							
									<td class="amount">
										<span class="amount-pay">- {{item.totalPrice}}</span>
									</td>
									<td class="operation">
										<template v-if="item.status==='3'"><button  @click="receive(item.id)">确认收货</button></template>
										<template v-else-if="item.status==='4'"><span>交易成功</span></template>
										<template v-else-if="item.status==='2'"><span >等待商家发货</span></template>
									</td>
								</tr>
							</template>
						</tbody>
					</table>
					<div class="clear"></div>

				</div>
				<!--底部-->
				<!-- <div class="footer">
					<div class="footer-hd ">
						<p>
							<a href="# ">燕园科技</a>
							<b>|</b>
							<a href="home.html">商城首页</a>
							<b>|</b>
							<a href="# ">支付宝</a>
							<b>|</b>
							<a href="# ">物流</a>
						</p>
					</div>
					<div class="footer-bd ">
						<p>
							<a href="#">关于燕园</a>
							<a href="# ">合作伙伴</a>
							<a href="# ">联系我们</a>
							<a href="# ">网站地图</a>
							<em>© 2020-2020 shop.ysu.edu 耿志龙 版权所有</em>
						</p>
					</div>
				</div> -->
			</div>

			<aside class="menu">
				<ul>
					<li class="person">
						<a href="#">个人中心</a>
					</li>
					<li class="person">
						<a href="#">个人资料</a>
						<ul>
							<li > <a href="information.html">个人信息</a></li>
							<li> <a href="address.html">收货地址</a></li>
							<li> <a href="password.html">修改密码</a></li>
						</ul>
					</li>
					<li class="person">
						<a href="#">我的交易</a>
						<ul>
							<!-- <li><a href="order.html">订单管理</a></li> -->
							<li class="active"> <a href="#">账单明细</a></li>
						</ul>
					</li>
	
				</ul>
			</aside>
		</div>
		<script src="../js/public.js"></script>
		<script>
			let vm2 = new Vue({
				el: '#app2',
				data: {
					tableData: []
				},
				created() {
					this.getData()
				},
				methods: {
					getData() {
						$axios.get('/order/goods',
							response => {
								this.tableData = response.data
								// console.log(this.tableData)
							}
						)
					},
					receive(id) {
						$axios.put(`/order/receive/${id}`,
							response => {
								this.getData()
							}
						)
					}
				}
			})
		</script>
	</body>

</html>